<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <title>卫星模式</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <style>
    body,
    html,
    #container {
      overflow: hidden;
      width: 100%;
      height: 100%;
      margin: 0;
      font-family: "微软雅黑";
    }

    /* 移除地图logo */

    .anchorBL {
      display: none
    }

    ul li {
      list-style: none;
    }

    .btn-wrap {
      z-index: 999;
      width: 226px;
      position: fixed;
      bottom: 30px;
      left: 10px;
      padding: 10px;
      border-radius: 5px;
      background-color: rgba(265, 265, 265, 0.9);
      box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    }

    .btn {
      width: 100px;
      height: 30px;
      float: left;
      background-color: #fff;
      color: rgba(27, 142, 236, 1);
      font-size: 14px;
      border: 1px solid rgba(27, 142, 236, 1);
      border-radius: 5px;
      margin: 0 5px 6px;
      text-align: center;
      line-height: 30px;
    }

    .btn:hover {
      background-color: rgba(135, 27, 236, 0.479);
      color: #fff;
      cursor: pointer;
    }
  </style>
  <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=sClwXDCZC6GLOdLlYevqoiEzfaUFzqP3"></script>
</head>

<body>

<div id="container"></div>
<ul class="btn-wrap" style="z-index: 99;">
  <li class="btn" onclick="showText()">显示文字</li>
  <li class="btn" onclick="hideText()">隐藏文字</li>
  <li class="btn" onclick="showIcon()">显示图标</li>
  <li class="btn" onclick="hideIcon()">隐藏图标</li>
  <li class="btn" onclick="addRouteType()">显示交通流量</li>
  <li class="btn" onclick="removeRouteType()">隐藏交通流量</li>
</ul>
</body>

</html>
<script>
  var map = new BMapGL.Map('container'); // 创建Map实例
  map.centerAndZoom(new BMapGL.Point(113.796414,36.302596), 16); // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
  var MapTypeControl = new BMapGL.MapTypeControl({
    // 控件的停靠位置（可选，默认左上角）
    anchor: BMAP_ANCHOR_TOP_RIGHT,
    // 控件基于停靠位置的偏移量（可选）
    offset: new BMapGL.Size(20, 20)
  })
  map.addControl(MapTypeControl); //添加地图类型控件

  // 创建定位控件
  var locationControl = new BMapGL.LocationControl({
    // 控件的停靠位置（可选，默认左上角）
    anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
    // 控件基于停靠位置的偏移量（可选）
    offset: new BMapGL.Size(20, 20)
  });
  // 将控件添加到地图上
  map.addControl(locationControl);

  // 设置天空颜色
  map.setDisplayOptions({
    skyColors: ['rgba(186, 0, 255, 0)', 'rgba(186, 0, 255, 0.2)']
  })



  //设置地图显示元素
  map.setDisplayOptions({
    poi: true //是否显示POI信息
  })

  console.log(map.getMapType());

  function showText() {
    map.setDisplayOptions({
      poiText: true
    })
  }

  function hideText() {
    map.setDisplayOptions({
      poiText: false
    })
  }

  function showIcon() {
    map.setDisplayOptions({
      poiIcon: true
    })
  }

  function hideIcon() {
    map.setDisplayOptions({
      poiIcon: false
    })
  }

  function addRouteType() {
    map.setTrafficOn(); // 叠加路况图层
  }

  function removeRouteType() {
    map.setTrafficOff(); // 关闭路况图层
  }

</script>